<template>
  <div>
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多数据了"
      @load="onLoad"
    >
      <div>
        <van-row>
          <van-col span="12">
            <van-button type="primary" block @click="setPlan">本月计划</van-button>
          </van-col>
          <van-col span="12">
            <van-button type="info" block @click="showMonth=true">历史查询</van-button>
          </van-col>
        </van-row>
      </div>
      <div class="m-total">
        <p style="color: green;">总计划：{{ stat.plan }}￥</p>
        <p style="color: red;">总实际：{{ stat.money }}￥</p>
        <p style="color: blue;">完成率：{{ stat.rate }}%</p>
      </div>
      <div
        class="m-cost"
        style="color: gray;"
      >
        <van-row style="margin-bottom: 2px;line-height: 30px;">
          <van-col span="5">月份</van-col>
          <van-col span="5">管家</van-col>
          <van-col span="5">实际</van-col>
          <van-col span="5">计划</van-col>
          <van-col span="4">完成率</van-col>
        </van-row>
      </div>
      <div
        v-for="item in list"
        :key="item.id"
        class="m-cost"
      >
        <van-row style="margin-bottom: 2px;line-height: 30px;">
          <van-col span="4"> {{ item.cdate }}</van-col>
          <van-col span="6"> {{ item.kname }}</van-col>
          <van-col span="5" style="color:red;"> {{ item.money }}￥</van-col>
          <van-col span="5" style="color:green;"> {{ item.plan }}￥</van-col>
          <van-col span="4" style="color:blue;"> {{ item.rate }}%</van-col>
        </van-row>
      </div>
    </van-list>
    <van-popup
      v-model="show"
      closeable
      :style="{ height: '98%', width: '100%' }"
    >
      <div
        class="m-cost"
        style="color: gray;"
      >
        <van-row style="margin: 15px 0;line-height: 30px;">
          <van-col span="7">管家</van-col>
          <van-col span="7">实际</van-col>
          <van-col span="10">计划</van-col>
        </van-row>
      </div>
      <div
        v-for="item in lstPlan"
        :key="item.id"
        class="m-cost"
      >
        <van-cell-group>
          <van-row style="margin-bottom: 2px;line-height: 44px;">
            <van-col span="7">{{ item.nickName }}</van-col>
            <van-col span="7" style="color:red;"> {{ item.money }}￥</van-col>
            <van-col span="10">
              <van-field
                v-model="item.moneyPlan"
                type="number"
                :label-width="0"
                input-align="center"
              />
            </van-col>
          </van-row>
        </van-cell-group>
      </div>
      <div style="margin: 16px">
        <van-button round block type="info" @click="changePlan">变更计划</van-button>
      </div>
    </van-popup>
    <van-popup
      v-model="showMonth"
      :style="{ height: '50%', width: '100%' }"
    >
      <van-datetime-picker
        v-model="currentDate"
        cancel-button-text=" "
        type="year-month"
        title="选择年月"
        :min-date="minDate"
        :max-date="maxDate"
        :formatter="formatter"
        @confirm="search"
      />
    </van-popup>
  </div>
</template>
<script>
import List from 'vant/lib/list'
import Row from 'vant/lib/row'
import Col from 'vant/lib/col'
import 'vant/lib/list/style'
import 'vant/lib/row/style'
import 'vant/lib/col/style'
import Button from 'vant/lib/button'
import 'vant/lib/button/style'
import DropdownMenu from 'vant/lib/dropdown-menu'
import 'vant/lib/dropdown-menu/style'
import DropdownItem from 'vant/lib/dropdown-item'
import 'vant/lib/dropdown-item/style'
import Field from 'vant/lib/field'
import 'vant/lib/field/style'
import { mapGetters } from 'vuex'
import { getPlanByMonth } from '@/api/ym'
import { getAdminsBySid, statPlanMoneyBySid, changePlanBySid } from '@/api/admin'
import Popup from 'vant/lib/popup'
import 'vant/lib/popup/style'
import CellGroup from 'vant/lib/cell-group'
import 'vant/lib/cell-group/style'
import Notify from 'vant/lib/notify'
import 'vant/lib/notify/style'
import DatetimePicker from 'vant/lib/datetime-picker'
import 'vant/lib/datetime-picker/style'

export default {
  components: {
    [DatetimePicker.name]: DatetimePicker,
    [Notify.name]: Notify,
    [CellGroup.name]: CellGroup,
    [Popup.name]: Popup,
    [Button.name]: Button,
    [List.name]: List,
    [Row.name]: Row,
    [Col.name]: Col,
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
    [Field.name]: Field
  },
  data () {
    return {
      minDate: new Date(2024, 0, 1),
      maxDate: new Date(2026, 0, 1),
      currentDate: new Date(2024, 1, 10),
      show: false,
      showMonth: false,
      stat: {
        plan: 0,
        money: 0,
        rate: 0
      },
      list: [],
      lstPlan: [],
      loading: false,
      finished: false
    }
  },
  computed: {
    ...mapGetters(['openId'])
  },
  created () {
    statPlanMoneyBySid(this.openId).then(res => {
      this.stat = res.data.data
      if (this.stat.money > 0) {
        this.stat.rate = (this.stat.money * 100 / this.stat.plan) | 0
      } else {
        this.stat.rate = 0
      }
    })
  },
  methods: {
    search(val) {
      // this.loading = false
      // const searchMonth = val.getFullYear()+ '-'+ ('0' + (val.getMonth() + 1)).slice(-2)
      // getPlanByMonth(this.openId, tdate).then(res => {
      //   this.list = res.data.data
      //   this.finished = true
      // })
      this.showMonth = false
      this.onLoad(val)
    },
    formatter (type, val) {
      if (type === 'year') {
        return `${val}年`
      } else if (type === 'month') {
        return `${val}月`
      }
      return val
    },
    onLoad (val) {
      this.loading = false
      let date
      if(val) {
        date = val
      } else {
        date = new Date()
        date.setMonth(date.getMonth() - 1)
      }
      const tdate = date.getFullYear() + '-' + ('0' + (date.getMonth() + 1)).slice(-2)
      getPlanByMonth(this.openId, tdate).then(res => {
        this.list = res.data.data
        this.finished = true
      })
    },
    setPlan() {
      getAdminsBySid(this.openId).then(res => {
        this.lstPlan = res.data.data
        this.show = true
      })
    },
    changePlan() {
      changePlanBySid(this.lstPlan)
      this.show = false
      Notify({ type: 'success', message: '提交成功' })
    }
  }
}
</script>
<style lang="scss" scoped>
.m-cost{
  background-color: #fff;
  // color:#C31171;
  font-size: 26px;
  // line-height: 60px;
  text-align: center;
  // box-shadow: 0px 0px 1px rgb(201, 201, 201);
  // margin-bottom: 3px;
  .m-cost-cell{
    display: flex;
    // justify-content: center;
    // width: 100%;
    // padding: 0 50px 0 50px;
  }
}
.m-total {
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  // color:#C31171;
  font-size: 28px;
  line-height: 40px;
  text-align: center;
  margin-bottom: 3px;
  padding: 0 20px;
}
</style>
